<template>
  <scroll-view scroll-y="true" class="scroll-view-container" @scrolltolower="scrollToLower"  lower-threshold='30'>
    <div class="timeline">
      <div class="entry d-flex" v-for="(item, index) in list" :key="index">
        <div class="title">
          <h3>{{ item.date }}</h3>
          <!-- <p>Title, Company</p> -->
        </div>
        <div class="body">
          <div class="d-flex content" @click="detail(index)" id="history-detail">
            <p>{{ item.title }}</p>
            <img :src="item.imgUrl" lazy-load="true" v-show="item.imgUrl">
          </div>
          <!-- <ul>
            <li>{{ item.content }}</li>
          </ul> -->
        </div>
      </div>
    </div>
    <p class="noData" v-if="!noData">正在努力加载中</p>
    <p class="noData" v-else>没有更多了</p>  
  </scroll-view>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [],
      page: 1,
      noData: false,
      totalPage: 5
    }
  },
  mounted () {
    this.getHistoryToday()
  },
  methods: {
    scrollToLower () {
      this.page++
      this.getHistoryToday()
    },
    // 获取历史上的今天
    getHistoryToday () {
      this.$http.get({
        url: this.$services.GET_HISTORY_TODAY,
        data: {
          page: this.page,
          pageSize: 5,
          d: this.date,
          type: this.type
        }
      }).then(res => {
        if (res.body.data[0] !== null) {
          this.totalPage = res.body.pageInfo.totalPage
          this.list = this.list.concat(res.body.data)
          for (const v of this.list) {
            v.date = v.date.slice(0, 4).replace('年', '')
            if (v.picUrl !== '') {
              v.imgUrl = JSON.parse(v.picUrl)[0].url
            } else {
              v.imgUrl = ''
            }
          }
          this.resetSwiperHeight()
          if (res.body.data.length === 0) {
            wx.reportAnalytics('no_content_in_history', {
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$gutter: 30px;
$border-width: 4px;
$dot-diameter: 8px;
.scroll-view-container {
  height: 300px;
}
.timeline {
  width:100%;
  max-width:800px;
  background:#fff;
  // padding: 100px 50px;
  position: relative;
  margin-top: 20px;
  // box-shadow: $container-shadow;
  &:before {
    content: '';
    position: absolute;
    top: 0px;
    left:calc(15% + 16px); //$gutter/2
    bottom: 0px;
    width: $border-width;
    background: #ddd;
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  } 
}
.bottom {
  font-size: 16px;
}
.noData {
  margin: 20px 0;
  text-align: center;
  font-size: 16px;
}
.entry {
  text-align: left;
  position: relative;
  .title {
    width: 15%;
    padding-right: 16px;
    text-align: right;
    position: relative;
    &:before {
      content: '';
      position: absolute;
      width: $dot-diameter;
      height: $dot-diameter;
      border: $border-width solid salmon;
      background-color:#fff;
      border-radius:100%;
      top: 25%;
      right: -$dot-diameter;
      z-index: 0;
    } 
    h3 {
      margin-top: 15px;
      font-size: 16px;
      font-style: italic;
      // font-weight: bold;
    }
    p {
      margin: 0;
      font-size: 100%;
    }
  }
  .body {
    // margin: 0 0 3em;
    // float: right;
    width: 76%;
    margin-left: 15px;
    margin-top: 15px;
    // padding-left: $gutter;
    .content {
      // line-height: 1.4em;
      // &:first-child {
      //   margin-top: 0;
      //   font-weight: 400;
      // }
      min-height: 50px;
      margin-bottom: 10px;
      margin-right: 10px;
      p {
        flex: 5;
        margin-right: 10px;
        font-size: 16px;
        text-align: justify;
      }
      img {
        flex: 2;
        height: 50px;
      }
    }
    ul {
      color:#aaa;
      padding-left: 0;
      list-style-type: none;

      li {
        margin-bottom: 10px;
        font-size: 16px;
      }
      // li:before {
      //   content: "–";
      //    margin-right: .5em;
      // }
    }
  }
}
</style>
